---
title: Ganchos de Modal
description: Abrir modais programaticamente via Hooks
---

# Ganchos de Modal

## Abrir modais programaticamente via Hooks

Os seguintes Hooks são fornecidos para permitir a abertura programática de modais em qualquer lugar do seu aplicativo.

- `useConnectModal`
- `useAccountModal`
- `useChainModal`

Cada um desses Hooks retorna um objeto com uma função para abrir seu modal correspondente. Note que as funções retornadas serão indefinidas se sua aplicação não estiver no estado necessário para que o modal seja aberto.

```tsx
import {
  useConnectModal,
  useAccountModal,
  useChainModal,
} from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  const { openConnectModal } = useConnectModal();
  const { openAccountModal } = useAccountModal();
  const { openChainModal } = useChainModal();

  return (
    <>
      {openConnectModal && (
        <button onClick={openConnectModal} type="button">
          Open Connect Modal
        </button>
      )}

      {openAccountModal && (
        <button onClick={openAccountModal} type="button">
          Open Account Modal
        </button>
      )}

      {openChainModal && (
        <button onClick={openChainModal} type="button">
          Open Chain Modal
        </button>
      )}
    </>
  );
};
```

Cada Hook também retorna um booleano para o status do modal. É geralmente recomendado que você dependa apenas dos Hooks Wagmi (isto é, `useAccount`) para reagir diretamente ao status de conexão da carteira do usuário, ao invés de depender do estado do Connect Modal.

```tsx
const { connectModalOpen } = useConnectModal();
const { accountModalOpen } = useAccountModal();
const { chainModalOpen } = useChainModal();
```

O RainbowKit foi projetado para ser não-disruptivo e responsivo, então os dApps devem sempre renderizar uma interface para os usuários, independentemente de terem conectado a carteira ou não. Um usuário pode conectar ou desconectar sua carteira diretamente do MetaMask, então o dApp deve ser responsivo ao status de conexão subjacente diretamente.

dApps que dependem de mecanismos como Sign-in with Ethereum para verificação do usuário, devem ao invés disso, depender da funcionalidade de [Autenticação](/docs/authentication).
